# MemeGeneratorJS
___
## Описание:
- Это приложение, которое позволяет пользователю создавать собственные мемы. 


- Приложение предоставляет возможность загрузки изображения, добавлять текстовые элементы и настраивать их положение и стиль, сохранять созданный мем на локальном компьютере.

___

### Как использовать

- Управление:
    - Загрузка изображения:
      - Нажмите на кнопку выбора файла и выберите изображение для загрузки.
    - Добавление текста:
      - После загрузки изображения введите текст в соответствующее текстовое поле.
    - Настройка текста:
      - Покрутите колесико мышки, чтобы настроить размер шрифта.
      - Вы можете настроить цвет, стиль и шрифт текста с использованием соответствующих элементов управления.
    - Позиционирование текста:
      - Перетащите текст по холсту, удерживая левую кнопку мыши.
    - Сохранение мема:
      - Нажмите кнопку "Сохранить", чтобы сохранить созданный мем на локальном компьютере в формате PNG.

___

### Обработка событий:
- Обработка загрузки изображения:
    - При выборе изображения происходит его загрузка и отображение на холсте.
- Обработка ввода текста:
    - Ввод текста вызывает перерисовку текста на холсте с учетом настроек.
- Позиционирование текста:
    - Холст реагирует на события мыши, позволяя перетаскивать текст по холсту.
- Изменение размера текста:
    - Прокрутка колеса мыши изменяет размер текста для лучшего визуального восприятия.
- Настройка цвета текста:
    - Выбор цвета обновляет цвет текста на холсте.
- Настройка стиля текста:
    - Изменение стиля текста вызывает перерисовку текста с учетом нового стиля.
- Настройка шрифта текста:
    - Выбор шрифта вызывает перерисовку текста с учетом нового шрифта.

## Реализация:
- `MAX_SIZE_IMAGE`:
  - Определяет максимальный размер загружаемого изображения.
- `isDragging, dragStartX, dragStartY`:
  - Управляют состоянием перетаскивания текста по холсту.
- `textX, textY`:
  - Определяют текущее положение текста на холсте.
- `image, memeCanvas`:
  - Содержат объект изображения и холст для отображения мема.
- `textSize, textColor, textStyle, textFont`:
  - Определяют параметры текста (размер, цвет, стиль, шрифт).


- `handleImageUpload(event)`:
    - Обрабатывает загрузку изображения и отображает его на холсте.
- `resizeImage()`:
    - Ограничивает размер изображения с учетом `MAX_SIZE_IMAGE`.
- `centerText()`:
    - Центрирует текст по центру холста.
- `drawText()`:
    - Отрисовывает текст на холсте с учетом текущих настроек.
- `handleInput()`:
    - Обрабатывает ввод текста, центрирует его и перерисовывает на холсте.
- `handleMouseDown(event)`:
    - Обрабатывает событие нажатия мыши для перемещения текста.
- `handleMouseUp()`:
    - Обрабатывает событие отпускания кнопки мыши.
- `handleMouseMove(event)`:
    - Обрабатывает движение мыши для перемещения текста.
- `handleWheel(event)`:
    - Обрабатывает событие прокрутки колеса мыши для изменения размера текста.
- `handleColorChange()`:
    - Обрабатывает изменение цвета текста.
- `handleStyleChange()`:
    - Обрабатывает изменение стиля текста.
- `handleFontChange()`:
    - Обрабатывает изменение шрифта текста.
- `saveMeme()`:
    - Сохраняет созданный мем в формате PNG на локальном компьютере.

___

## Используемые библиотеки и технологии:
- HTML5, CSS3, JavaScript:
    - Основные технологии для разработки веб-приложения.
- Canvas API:
    - Используется для отрисовки изображений и текста на холсте.
- FileReader API:
  - Используется для чтения содержимого загруженного изображения.

